<template>
  <div
    @mouseleave="toggleShowNav('hide')"
    @mouseenter="toggleShowNav('show')"
    @mouseover="toggleShowNav('show')"
    @touchstart="toggleShowNav('touch')"
    @touchmove="toggleShowNav('show')"
    :class="{showNav:showNav,hideNav:!showNav}"
    class="jfHeader display-flex justify-content-space-between align-items-center"
  >
    <img src="../../../assets/logo.png" alt>
    <div class="jfHeaderOuter display-flex flex-direction-column justify-content-space-between">
      <ul class="headerRight display-flex justify-content-space-between align-items-center">
        <li
          @click="changeTab('home')"
          :class="{active:activeTab==='home'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>主页</span>
        </li>
        <li
          @click="changeTab('service')"
          :class="{active:activeTab==='service'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>服务</span>
        </li>
        <li
          @click="changeTab('cases')"
          :class="{active:activeTab==='cases'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>案例</span>
        </li>
        <li
          @click="changeTab('about')"
          :class="{active:activeTab==='about'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>关于我们</span>
        </li>
        <li
          @click="changeTab('join')"
          :class="{active:activeTab==='join'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>加入我们</span>
        </li>
        <li
          @click="changeTab('contact')"
          :class="{active:activeTab==='contact'}"
          class="display-flex justify-content-center align-items-center"
        >
          <span>联系我们</span>
        </li>
      </ul>
      <div ref="botLine" class="headerRightBot">
        <div class="headerRightBotInner display-flex justify-content-center align-items-center">
          <div class="headerRightBotInnerItem" :style="{transform:transX}"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Nav",
  data: function() {
    return {
      // transX:'translateX(0px)',
    };
  },
  computed: {
    ...mapState(["showNav", "transX", "activeTab"])
  },
  methods: {
    // 切换tab
    changeTab: function(tab) {
      var that = this;
      var unitW = that.$refs["botLine"].offsetWidth;
      switch (tab) {
        case "home":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(0px)"
          });
          window.scrollTo(0, 0);
          break;
        case "service":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(" + unitW / 6 + "px)"
          });
          window.scrollTo(0, this.$store.state.serviceEl.offsetTop);
          break;
        case "cases":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(" + (unitW / 6) * 2 + "px)"
          });
          window.scrollTo(0, this.$store.state.casesEl.offsetTop);
          break;
        case "about":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(" + (unitW / 6) * 3 + "px)"
          });
          window.scrollTo(0, this.$store.state.aboutEl.offsetTop);
          break;
        case "join":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(" + (unitW / 6) * 4 + "px)"
          });
          window.scrollTo(0, this.$store.state.joinEl.offsetTop);
          break;
        case "contact":
          this.$store.commit("changeTab", {
            tab: tab,
            transX: "translateX(" + (unitW / 6) * 5 + "px)"
          });
          window.scrollTo(0, this.$store.state.contactEl.offsetTop);
          break;
      }
    },
    // 切换显示导航栏
    toggleShowNav: function(type) {
      var that = this;
      switch (type) {
        case "show":
          that.$store.commit("toggleShowNav", "show");
          break;
        case "hide":
          that.$store.commit("toggleShowNav", "hide");
          break;
        case "touch":
          that.$store.commit("toggleShowNav", "touch");
      }
    }
  },
  mounted: function() {
    var that = this;
    var unitW = that.$refs["botLine"].offsetWidth;
    window.onscroll = function(e) {
      var t = document.documentElement.scrollTop || document.body.scrollTop;
      if (t >= that.$store.state.contactEl.offsetTop - 10) {
        that.$store.commit("changeTab", {
          tab: "contact",
          transX: "translateX(" + (unitW / 6) * 5 + "px)"
        });
      } else if (t >= (that.$store.state.joinEl.offsetTop-10)) {
        that.$store.commit("changeTab", {
          tab: "join",
          transX: "translateX(" + (unitW / 6) * 4 + "px)"
        });
      } else if (t >= (that.$store.state.aboutEl.offsetTop-10)) {
        that.$store.commit("changeTab", {
          tab: "about",
          transX: "translateX(" + (unitW / 6) * 3 + "px)"
        });
      } else if (t >= (that.$store.state.casesEl.offsetTop-10)) {
        that.$store.commit("changeTab", {
          tab: "cases",
          transX: "translateX(" + (unitW / 6) * 2 + "px)"
        });
      } else if (t >= (that.$store.state.serviceEl.offsetTop-10)) {
        that.$store.commit("changeTab", {
          tab: "service",
          transX: "translateX(" + unitW / 6 + "px)"
        });
      } else {
        that.$store.commit("changeTab", {
          tab: "home",
          transX: "translateX(" + 0 + "px)"
        });
      }
    };
  }
};
</script>
<style scoped>
.jfHeader {
  background: rgba(255, 255, 255, 1);
  position: fixed;
  top: 0;
  left: 0;
  width: 24rem;
  height: 1.45rem;
  z-index: 999;
}
.showNav {
  opacity: 1;
  transition: all 1s ease;
}
.hideNav {
  opacity: 0;
  transition: all 1s ease;
}
.jfHeader > img {
  width: 4rem;
}
.jfHeaderOuter {
  height: 100%;
  width: 12rem;
}
.headerRight {
  width: 100%;
  height: 80%;
  margin-top: 0.1rem;
}
.headerRight > li {
  width: 16.6%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  font-size: 0.35rem;
  color: #767676;
  font-weight: 400;
  cursor: pointer;
}
.headerRight > li.active {
  color: #0078d7;
  transition: all 0.5s ease;
}
.headerRightBot {
  width: 100%;
  height: 10%;
}
.headerRightBotInner {
  width: 16.6%;
  height: 100%;
}
.headerRightBotInnerItem {
  width: 80%;
  height: 60%;
  background: #0078d7;
  transition: all 0.5s ease;
}
</style>
